ficonCfg = {
  $display: block
  $icon: false
  $top: calc(50% - 8px)
  $right: 10px
  $font-size: false
  $color: false
  $pseudo: after

  $isrelative: true
}


placeholder($color = $placeholderColor, $font-size = $inputSize)
  &::-webkit-input-placeholder
    color: $color
    font-size: $font-size
  &::-moz-placeholder 
    color: $color
    font-size: $font-size
  &::-moz-placeholder
    color: $color
    font-size: $font-size
  &::-ms-input-placeholder
    color: $color
    font-size: $font-size

//input 带icon 公共部分
ss-form-icon($config = false)
  cfg = merge({}, ficonCfg, $config)
  if (cfg.$isrelative == true)
    +cache()
      position: relative
  ss-icon(cfg.$icon, cfg.$font-size, cfg.$color,  $isFlex: cfg.$display, $pseudo: cfg.$pseudo)
  &:{cfg.$pseudo}
    ss-position(absolute, $top: cfg.$top, $right: cfg.$right)
  
ss-form_control( $height = $inputHeight, $br = $inputBr, $width = 100%)
  background-color: $bgColor
  border: 1px solid $borderColor 
  box-sizing: border-box
  color: $color-text-title
  height: $height
  line-height: @height
  padding: $inputPadding
  outline: none;
  width: $width if ($width != false)
  if ($br != 0)
    border-radius: $inputBr
  &:focus
    border-color: $inputHoverColor
    outline: none;
  &:read-only
    &:focus
      box-shadow: none;
      border-color: none
  &:disabled
    background-color: $disabledColorBg
    border-color: $disabledColor
    color: $borderColor
    cursor: default;
  &.noborder
    border: none
    height: $height - 2
  &.itemError
    border-color: $color-aux-fail

//自定义
ss-custom-form()
  ss-form_control()
  &.i-sm
    width: $inputWidMin
  &.i-lg
    width: $inputWidMax

//checkbox radio
ss-rcInput-theme($type = 'default')    //调用时 需要注意父级给个relative
  input
    cursor: pointer
    position: absolute;
    top: 0;
    left: @top
    width: 100%;
    height: @width
    opacity: @top
    border: @top
    margin: @top
    z-index: 9;
    &:checked
      &+[class*='-descript']
        &:before
          color: $rcCheckedColor
      &+[class*='radiobox']
        &:before
          content: $radioChecked;
      &+[class*='checkbox']
        &:before
          content: $checkboxChecked;
        
    &:disabled
      &+[class*='-descript']
        color: $disabledColor
        &:before
          background: $disabledColorBg
          cursor: not-allowed
        &[class*='radio']
          &:before
            border-radius: 100%
  [class*='-descript']
    font-size: $rcSize
    position: relative
    ss-display-flex(row nowrap, flex-start, center)
    &:before
      margin-right: $rcInputMr
      color: $rcColor
  [class*='radio']
    &:before
      content: $radio
  [class*='checkbox']
    &:before
      content: $checkbox


ss-form-checkbox-radio($type = 'default')
  ss-display-flex(row nowrap, flex-start)
  ss-rcInput-theme($type)
  margin-right: $space
  position: relative
  &:only-child
    margin-right: 0

/*
  输入框带icon
*/

//下拉
ss-custom-form-select()
  ss-pop('>.fkp-dd-list')

//下拉组件调用
ss-form-select()
  ss-custom-form-select()
  // ss-form-icon({$icon: $inputSelect, $top: calc(50% - 6px), $font-size: 12px})
  ss-form-icon({$icon: 'default', $top: calc(50% - 1px), $right: 10px})
  &:after
    ss-triangle({$direction: 'bottom', $size: 5px})  

//下拉 自定义下拉内容
ss-form-destination()
  ss-form-icon({$icon: 'default', $top: calc(100% - 8px), $right: 3px})
  &:after
    ss-triangle({$direction: 'rt', $type: 'second', $size: 5px})      // 8px = 5px($size) + 3px

//日期
ss-form-date()
  ss-form-icon({$icon: $inputDate, $top: calc(50% - 10px), $font-size: 18px, $color: $borderColor})
  .form_control
    cursor: default



//仿组件的纯结构
likeformCfg = {
  $bg: $color-bg
  $space: 10px
}
ss-func-like-form($class ='.like-form', $config = false)
  cfg = merge({}, likeformCfg, $config)
  {$class}
    background: cfg.$bg
    padding: cfg.$space
    margin-bottom: -(cfg.$space)
    ss-func-absolute-triangle($absoluteCfg: {$top: -(10px * 2)}, $triangleCfg: {$size: 10px, $color: cfg.$bg})
    &.lr
      @extends $flex-nowrap
      margin-bottom: 0
      flex-flow: row wrap
      .ss-item
        margin-bottom: 0
        margin-right: 24px
    .item-title
      margin-right: @padding
    .ss-item
      @extends $flex-nowrap-start-center
      margin-bottom: @padding
    .item-desc
      margin: 0 @padding
    .item-opt
      margin-left: @padding
    input
      width: $inputWidMin

